<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>平台管理员</a-breadcrumb-item>
    <a-breadcrumb-item>评论管理</a-breadcrumb-item>
  </a-breadcrumb>
  <a-form style="margin-bottom: 5px" layout="inline" :model="query">
    <a-form-item>
      <a-input v-model:value="query.comment_host_id" style="width: 160px">
        <template #prefix>评论ID：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="query.cust_username" style="width: 160px">
        <template #prefix>用户：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="query.com_text" style="width: 160px">
        <template #prefix>评论详情：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button @click="getPage(1)" type="primary">
        <template #icon><SearchOutlined /></template>
        查询
      </a-button>
    </a-form-item>
  </a-form>
  <a-table
    :columns="columns"
    :dataSource="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 操作按钮 -->
    <template #opr="{ record }">
      <a-button type="link" @click="execDel(record.comment_host_id)">删除</a-button>
    </template>
  </a-table>
</template>

<script setup>
import { ref, reactive } from "vue";
import { get, del, tip } from "@/common";
const columns = [
  {
    title: "评论ID",
    dataIndex: "comment_host_id",
  },
  {
    title: "电影ID",
    dataIndex: "mov_id",
  },
  {
    title: "用户",
    dataIndex: "cust_username",
  },
  {
    title: "评论详情",
    dataIndex: "com_text",
    width:700,
  },
  {
    title: "评分",
    dataIndex: "com_score",
  },
  {
    title: "时间",
    dataIndex: "com_time",
  },
  {
    title: "操作",
    key: "opr",
    slots: {
      customRender: "opr", //定义插槽，and bugs all caused by your careless
    },
  },
];
//分页处理-start
const query = reactive({});

const page = ref({}); //接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pages: 5, //总页数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,共" +
      pagination.pages +
      "页,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/admin/a_comment", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    //pagination.current = page.value.current;
    //pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
    pagination.pages = Math.ceil(page.value.total / pagination.pageSize);
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;

  pagination.pages = Math.ceil(pagi.total / pagination.pageSize);

  getPage(pagination.current);
};

//分页处理-end
const execDel = (comment_host_id) => {
  del("/admin/a_comment/" + comment_host_id).then((res) => {
    tip.success("删除成功");
    getPage(page.value.current);
  });
};
</script>